<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>SMILES Parser Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.3/noty.css" rel="stylesheet">
  <script src="../dist/smiles-drawer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.3/noty.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body {
      background: linear-gradient(330deg, #00323D, #004C42);
      overflow-y: auto;
    }

    h1 {
      display: inline-block;
      font-family: 'Megrim';
      font-weight: 400;
      font-size: 2.0em;
      color: #50C5A9;
      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.25);

      margin: 0;
      padding: 0;
      padding-bottom: 15px;
    }

    table {
      width: 100%;
    }

    table tbody tr td {
      padding: 3px;
      vertical-align: bottom;
      text-align: center;
    }

    .input-container {
      padding: 10px;
    }

    .settings-container {
      position: absolute;
      bottom: 0;
      left: 5%;
      right: 5%;
      padding: 5px;
      background-color: rgba(0, 0, 0, 0.8);
    }

    .svg-container {
      margin: 10px auto;
      text-align: center;
      height: 500px;
      width: 500px;
    }

    .logo {
      display: none;
      width: 1.3em;
      height: 1.3em;
    }

    input[type=text] {
      display: block;
      box-sizing: border-box;
      width: 100%;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 10px;
      margin-bottom: 5px;
      border-radius: 2px;
      color: #fff;
      font-size: 1.00em;
      outline: none;
    }

    input[type=text]::placeholder {
      color: rgba(255, 255, 255, 0.25);
    }

    label {
      font-family: Lato;
      font-size: 0.75em;
      color: #fff;
      display: block;
    }

    #log {
      visibility: hidden;
      padding: 5px;
      font-family: Consolas, Courier New, Courier, monospace;
      font-weight: bold;
      color: rgba(255, 38, 0, 0.8)
    }

    /* Slider */

    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 2px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.75);
      outline: none;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      border: 4px solid #000;
    }

    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="input-container">
    <img src="logo.png" class="logo" />
    <h1>SmilesDrawer</h1>
    <input id="input" type="text" class="parser" placeholder="Enter a valid SMILES ..." />
    <div id="log">&nbsp;</div>
  </div>

  <div class="drawing-container">
    <div class="svg-container">
      <svg id="output-svg" viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"></svg>
    </div>
  </div>

  <div class="settings-container" style="display:none">
    <table>
      <tbody>
        <tr>
          <td>
            <label for="textSize">Text Size</label>
            <input class="slider" type="range" id="textSize" name="textSize" value="5" min="2" max="20" step="1" />
          </td>
          <td>
            <label for="bondThickness">Bond Thickness</label>
            <input class="slider" type="range" id="bondThickness" name="bondThickness" value="0.6" min="0.01" max="5"
              step="0.1" />
          </td>
          <td>
            <label for="bondLength">Bond Length</label>
            <input class="slider" type="range" id="bondLength" name="bondLength" value="16" min="1" max="99" step="1" />
          </td>
          <td>
            <label for="shortBondLength">Short Bond Length</label>
            <input class="slider" type="range" id="shortBondLength" name="shortBondLength" value="85" min="0" max="100"
              step="1" />
          </td>
          <td>
            <label for="bondSpacing">Bond Spacing</label>
            <input class="slider" type="range" id="bondSpacing" name="bondSpacing" value="4" min="1" max="99"
              step="1" />
          </td>
          <td>
            <label for="size">Size</label>
            <input class="slider" type="range" id="size" name="size" value="500" min="250" max="1000" step="1" />
          </td>
          <td>
            <label for="overlap">Overlap Resolution Steps</label>
            <input class="slider" type="range" id="overlap" name="overlap" value="1" min="0" max="10" step="1" />
          </td>
        </tr>
      </tbody>
    </table>

    <div>
      <label><input id="debug" name="debug" type="checkbox">Debug</label>
    </div>
  </div>

  <script>
    var input = document.getElementById('input');
    var debugCheckbox = document.getElementById('debug');
    var bondThicknessInput = document.getElementById('bondThickness')
    var textSizeInput = document.getElementById('textSize');
    var bondLengthInput = document.getElementById('bondLength');
    var shortBondLengthInput = document.getElementById('shortBondLength');
    var bondSpacingInput = document.getElementById('bondSpacing');
    var sizeInput = document.getElementById('size');
    var overlapInput = document.getElementById('overlap');

    var options = {
      debug: false,
      atomVisualization: 'default'
    }

    var smilesDrawer = new SmilesDrawer.Drawer(options);
    var svgDrawer = new SmilesDrawer.SvgDrawer(options);
    var input = document.getElementById('input');
    var log = document.getElementById('log');

    function draw() {
      let t = performance.now();

      SmilesDrawer.parse(input.value, function (tree) {
        svgDrawer.draw(tree, 'output-svg', 'dark', false);
        let td = performance.now() - t;
        log.innerHTML = '&nbsp;';
        log.style.visibility = 'hidden';

        new Noty({
          text: 'Drawing took ' + td.toFixed(3) + 'ms with a total overlap score of ' + svgDrawer.getTotalOverlapScore().toFixed(3) + '.',
          killer: true,
          timeout: 2000,
          animation: {
            open: null,
            close: null
          }
        }).show();

        console.log(svgDrawer.getMolecularFormula());
      }, function (err) {
        log.innerHTML = err;
        log.style.visibility = 'visible';
        console.log(err);
      });
    }

    function updateOptions() {
      smilesDrawer = new SmilesDrawer.Drawer(options);
      draw();
    }

    document.addEventListener('DOMContentLoaded', function (event) {
      input.addEventListener('input', function () {
        draw();
      });

      debugCheckbox.addEventListener('click', function () {
        options.debug = debugCheckbox.checked ? true : false;
        updateOptions();
      });

      textSizeInput.addEventListener('input', function () {
        options.fontSizeLarge = parseInt(textSizeInput.value);
        options.fontSizeSmall = (3 / 5) * options.fontSizeLarge;
        updateOptions();
      });

      bondThicknessInput.addEventListener('input', function () {
        options.bondThickness = parseFloat(bondThicknessInput.value);
        updateOptions();
      });

      bondLengthInput.addEventListener('input', function () {
        options.bondLength = parseInt(bondLengthInput.value);
        updateOptions();
      });

      shortBondLengthInput.addEventListener('input', function () {
        options.shortBondLength = parseInt(shortBondLengthInput.value) / 100;
        updateOptions();
      });

      bondSpacingInput.addEventListener('input', function () {
        options.bondSpacing = parseInt(bondSpacingInput.value);
        updateOptions();
      });

      sizeInput.addEventListener('input', function () {
        options.width = parseInt(sizeInput.value);
        options.height = parseInt(sizeInput.value);
        updateOptions();
      });

      overlapInput.addEventListener('input', function () {
        options.overlapResolutionIterations = parseInt(overlapInput.value);
        updateOptions();
      });
    });
  </script>
</body>

</html>